<template>
  <view>
    <uni-icons
      class="back-view"
      type="back"
      size="28"
      @click="backAction"
    ></uni-icons>
    <swiper
      class="swiper"
      circular="true"
      indicator-dots="true"
      autoplay="true"
      interval="2000"
      duration="500"
    >
      <swiper-item
        v-for="(item, index) in goods.pics"
        :key="item.pics_id"
        @click="swiperAction(index)"
      >
        <image :src="item.pics_mid_url" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="goods-info">
      <text class="goods-price">¥{{ goods.goods_price }}</text>
      <view class="goods-name">
        <text>{{ goods.goods_name }}</text>
        <view class="goods-collect" @click="collectAction">
          <uni-icons
            v-if="isCollect"
            type="star-filled"
            size="18"
            color="gray"
          ></uni-icons>
          <uni-icons
            v-else
            type="star"
            size="18"
            color="gray"
          ></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <text>快递：免运费</text>
    </view>
    <uni-table :border="true" :stripe="true">
      <uni-tr v-for="item in goods.attrs" :key="item.attr_id">
        <uni-td>{{ item.attr_name }}</uni-td>
        <uni-td>{{ item.attr_value }}</uni-td>
      </uni-tr>
    </uni-table>
    <view class="goods_introduce">
      <rich-text :nodes="goods.goods_introduce"></rich-text>
    </view>
    <detail-tool
      class="detail-tool"
      @addGoods="addGoodsAction"
      @cartJump="cartAction"
    ></detail-tool>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"

export default {
  onLoad: function (option) {
    const param = JSON.parse(decodeURIComponent(option.param))
    this.goods_id = param
    this.getGoodsDetail()
  },

  data() {
    return {
      goods_id: 0,
      goods: {},
    }
  },

  methods: {
    ...mapMutations(["collectGoods"]),

    backAction() {
      this.$mrouter.back()
    },

    async getGoodsDetail() {
      const value = await this.$http.goodsDetail({
        goods_id: this.goods_id,
      })
      this.goods = value
    },

    addGoodsAction() {
      this.$store.commit("addGoods", {
        count: 1,
        checked: true,
        goods_id: this.goods.goods_id,
        goods_name: this.goods.goods_name,
        goods_price: this.goods.goods_price,
        goods_small_logo: this.goods.goods_small_logo,
      })

      uni.showToast({ title: "加入成功" })
    },

    cartAction() {
      this.$mrouter.switchTab("/pages/cart/index")
    },

    swiperAction(index) {
      const urls = this.goods.pics.map((item) => {
        return item.pics_mid_url
      })
      uni.previewImage({
        urls: urls,
        current: index,
      })
    },

    collectAction() {
      this.collectGoods(this.goods_id)
      uni.showToast({
        title: "收藏成功",
      })
    },
  },

  computed: {
    ...mapState(["collectList"]),

    isCollect() {
      const value = this.collectList.find((item) => {
        return item === this.goods_id
      })
      return value != undefined
    },
  },
}
</script>

<style lang="scss" scoped>
.back-view {
  position: fixed;
  z-index: 99;
  padding: 20rpx;
  top: env(safe-area-inset-top);
}
.swiper {
  width: 100%;
  height: 600rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  color: gray;
  font-size: 24rpx;
  .goods-price {
    color: #c00000;
    font-size: 38rpx;
  }
  .goods-name {
    display: flex;
    justify-content: space-between;
    padding: 10rpx 0;
    font-size: 28rpx;

    .goods-collect {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-left: 1rpx solid #e2e2e2;
      margin-left: 20rpx;
      width: 150rpx;
    }
  }
}

::v-deep .uni-table-tr {
  .uni-table-td {
    padding: 20rpx;
    font-size: 24rpx !important;
  }
}

.goods_introduce {
  padding-bottom: 100rpx;
}
.detail-tool {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}
</style>
